<template>
    <div class="comment-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <!-- 面包屑路径导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>评论管理</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- /面包屑路径导航 -->
            </div>
            <!--
          1、把数据列表绑定给表格的 data
          2、设计表格列
          3、给表格列绑定要渲染的数据字段
         -->
            <el-table class="table-list" :data="articles" style="width: 100%" stripe>
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column prop="total_comment_count" label="总评论数">
                </el-table-column>
                <el-table-column prop="fans_comment_count" label="粉丝评论数">
                </el-table-column>
                <el-table-column prop="address" label="评论状态">
                    <template slot-scope="scope">
                        {{ scope.row.comment_status ? '正常' : '关闭' }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.comment_status" active-color="#13ce66" inactive-color="#ff4949"
                            :disabled="scope.row.statusDisabled" @change="onStatusChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>
            <!--
          绑定页码
          绑定每页大小
          current-page 控制激活的页码，初始肯定是第 1 页
          page-sizes 控制可选的每页大小
         -->
            <el-pagination layout="  prev, pager, next, sizes, jumper" :page-sizes="[5, 10]" :page-size="pagesize"
                :total="articles.length" :pager-count="5" :current-page="currentPage"
                @current-change="handleCurrentChange" @size-change="handleSizeChange">
            </el-pagination>
        </el-card>
    </div>
</template>
  
<script>
import {
    getArticles,
    updateCommentStatus
} from '@/api/article'

export default {
    name: 'CommentIndex',
    components: {},
    props: {},
    data() {
        return {
            articles: [], // 文章数据列表
            totalCount: 0, // 总数据条数
            currentPage: 1, //展示第几页
            pagesize: 5, //每页的数据条数
            page: 1 // 当前激活的页码
        }
    },
    created() {
        this.loadArticles()
    },
    methods: {
        handleSizeChange() {
            this.loadArticles(1)
        },
        handleCurrentChange(page) {
            // 页码改变，加载指定页码数据
            this.loadArticles(page)
        },
        loadArticles(page = 1) {
            // 让分页组件激活的页码和请求数据的页码保持一致
            this.page = page
            getArticles().then(res => {
                this.articles.push(res.data)
                console.log(res.data);
            })
        },

        onStatusChange(article) {
            // 禁用开关
            article.statusDisabled = true

            // 请求提交修改
            updateCommentStatus(article.id.toString(), article.comment_status).then(res => {
                // 启用开关
                article.statusDisabled = false
                this.$message({
                    type: 'success',
                    message: article.comment_status ? '开启文章评论状态' : '关闭文章评论状态'
                })
            })
        }
    }
}
</script>
  
<style scoped lang="less">
.table-list {
    margin-bottom: 30px;
}
</style>
  